<!--
 * @Author: zhangguoliang
 * @Date: 2022-05-07 14:19:05
 * @LastEditors: wangqiaoxin 793021821@qq.com
 * @LastEditTime: 2025-09-15 16:15:08
-->
<template>
	<div id="drive_body">
		<a-config-provider
			:locale="zhCn"
			:getPopupContainer="getPopupContainer"
		>
			<div class="header">
				<img v-if="isIndex" src="./assets/img/header-logo.png" alt />
				<router-link :to="returnPath" v-else class="return"
					><arrow-left-outlined /> 返回</router-link
				>
				<div
					style="
						width: 100%;
						cursor: pointer;
						margin-top: -10px;
						margin-bottom: -10px;
						-webkit-app-region: drag;
					"
				></div>
				<!-- 解决 electron 版本31.4之后，-webkit-app-region: drag; 不生效，不能拖动弹窗问题 -->
				<iframe
          style="display: none;"
        />
				<div class="operate">
					<!-- <a-dropdown :trigger="['click']">
						<div class="operate-icon">
							<icon-font
								type="icon-gengduo"
								class="icon-font"
							></icon-font>
						</div>
						<template #overlay>
							<a-menu @click="handleMenuClick">
								<a-menu-item key="1">挂失</a-menu-item>
								<a-menu-item key="2">解除绑定</a-menu-item>
							</a-menu>
						</template>
					</a-dropdown> -->
					<div class="operate-icon" @click="minimize">
						<img src="./assets/img/operate-minimize.png" />
					</div>
					<div class="operate-icon" @click="closeConfirm">
						<img src="./assets/img/operate-close.png" />
					</div>
				</div>
			</div>
			<router-view v-slot="{ Component }">
				<keep-alive :include="['Home']"> 
					<component 
						:is="Component" 
						v-if="route.meta.keepAlive"
						:key="route.fullPath"
					/>
				</keep-alive>
				<component 
					:is="Component" 
					v-if="!route.meta.keepAlive"
					:key="route.fullPath"
				/>
			</router-view>
			<report-for-loss v-model:visible="reportVisible"></report-for-loss>
			<unbound v-model:visible="unboundVisible"></unbound>
		</a-config-provider>
	</div>
	<a-modal
			v-model:visible="tipVisible"
			class="tip-modal"
			width="40%"
			:footer="null"
			@cancel="cancel"
		>
			<div class="content">
				<p class="closeModel-title">
					您点击了关闭按钮，您是想：
				</p>
				<a-radio-group
					v-model:value="selectCloseType"
					class="closeModel-radio"
				>
					<a-radio :value="1">最小化到系统托盘区，不退出程序</a-radio>
					<a-radio :value="2">退出程序</a-radio>
				</a-radio-group>
			</div>

			<div class="footer">
				<div class="btn-list">
					<a-button
						type="primary"
						@click="sureClose"
						>确定</a-button
					>
					<a-button @click="cancel">取消</a-button>
				</div>
			</div>
		</a-modal>
</template>

<script setup>
import zhCn from 'ant-design-vue/es/locale/zh_CN';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { proModelStore } from '@/store/proModel.js';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import ReportForLoss from './views/user/report-for-loss.vue';
import Unbound from './views/user/unbound.vue';

import { getCurrentWindow } from '@tauri-apps/api/window';
import {
  isPermissionGranted,
  requestPermission,
  sendNotification,
} from '@tauri-apps/plugin-notification';
let appWindow = getCurrentWindow();
const ModelStore = proModelStore();
ModelStore.init();
const isIndex = ref(true);
const reportVisible = ref(false);
const unboundVisible = ref(false);

const route = useRoute();
let returnPath = ref('/');

let minimize = () => {
	appWindow.minimize();
};
let close = () => {
	appWindow.close();
};

let tipVisible = ref(false);
let selectCloseType = ref(1);
let closeConfirm = () => {
	tipVisible.value = true;
}
let cancel = () => {
	tipVisible.value = false;
	selectCloseType.value = 1;

}
let sureClose = () => {
	if(selectCloseType.value === 2) {
		close();
	} else {
		minimize();
		cancel();
	}
}
dayjs.locale(zhCn.locale);

function getPopupContainer() {
	return document.getElementById('drive_body');
}

watch(
	() => route.path,
	(newPath, oldPath) => {
		// 在这里可以执行你想要的操作
		if (newPath === '/') {
			isIndex.value = true;
		} else if (newPath.includes('/lock/serve-list')) {
			isIndex.value = false;
			returnPath.value = '/user/authorization';
		} else {
			returnPath.value = '/';
			isIndex.value = false;
		}
	}
);
appWindow.listen('show', ({payload}) => {
	
	 appWindow.show().then(() => {
		console.log('show');
		appWindow.center();
		appWindow.maximize();
		
	 });
	});
	let permissionGranted = false

let granted =async ()=>{
if (!permissionGranted){
		permissionGranted = await isPermissionGranted();
	 }
	 
if (!permissionGranted) {
	console.log('requestPermission');
  const permission = await requestPermission();
  permissionGranted = permission === 'granted';
} 
}

appWindow.listen('new_lock', async ({payload}) => {
	await granted();

if(permissionGranted){
	console.log('new_lock', payload);
	sendNotification({ title: '云算房加密锁', body: `检测到${payload.length}把云算房加密锁: ${payload.join(", ")}` });
}
	
});
appWindow.listen('delete_lock', async ({payload}) => {
	await granted();
if(permissionGranted){
	console.log('delete_lock', payload);
	sendNotification({ title: '云算房加密锁', body: `检测到${payload.length}把云算房加密锁被移除: ${payload.join(", ")}` });
}
	
});

const handleMenuClick = ({ key }) => {
	console.log('key', typeof key);
	if (key === '1') {
		reportVisible.value = true;
	} else {
		unboundVisible.value = true;
	}
};
// document.oncontextmenu = function(){return false;}
</script>

<style lang="scss">
body {
	font-family: Source Han Sans CN;
	background: url('/src/assets/img/bg-img.png') no-repeat;
	background-size: cover;
}
.header {
	display: flex;
	justify-content: space-between;
	padding: 14px 20px;
	height: 50px;
	.operate {
		z-index: 999;
		width: 110px;
		display: flex;
		height: 18px;
		align-items: center;
		margin-left: 20px;
		flex-direction: row;
		justify-content: space-between;
		/* padding-top: 5px; */
		line-height: 32px;
		opacity: 1;
		transition: opacity linear 0.2s;
		&-icon {
			width: 20px;
			height: 20px;
		}
		&-icon:hover {
			cursor: pointer;
			transition: opacity linear 0.2s;
			opacity: 0.6;
		}
	}
	.return {
		display: inline-block;
		text-align: center;
		width: 100px;
		background: #095cb8;
		border-radius: 0 0 6px 0;
		color: #ffffff;
		margin: -14px 0 0 -20px;
		line-height: 36px;
	}
}
.tip-modal {
	.content {
		padding: 16px 10px 10px;
		.closeModel-radio {
			.ant-radio-wrapper {
				margin-bottom: 6px;
			}
		}
	}
	.footer .btn-list {
		display: flex;
    justify-content: flex-end;
		.ant-btn {
			margin-left: 16px;
		}
	}
}
</style>
